{% extends 'base.html' %}

{% block title %}
    <title>首页</title>
{% endblock title %}
{% block content %}
    <div class="panel panel-success">
        <!-- Default panel contents -->
        <div class="panel-heading">
            <span style="vertical-align:middle;">主机列表</span>
            {% if request.session.role == 1 %}
                <button type="button" class="btn btn-success pull-right" style="margin-top: -6px" data-toggle="modal"
                        data-target="#add_host">添加
                </button>
            {% endif %}
        </div>

        <!-- Table -->
        <table class="table table-bordered" style="border:1px solid #ddd">
            <thead>
            <tr>
                <th>序号</th>
                <th>主机名</th>
                <th>ip地址</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in host_list %}
                <tr>
                    <th>
                        <span>{{ forloop.counter }}</span>
                        <span class="id" style="display:none">{{ item.id }}</span>
                    </th>
                    <td class="hostname">{{ item.hostname }}</td>
                    <td class="ipaddr">{{ item.ipaddr }}</td>
                    <td>{{ item.create_time|date:'Y-n-d H:i:s' }}</td>
                    <td>
                        <a href="/view_dir?ip={{ item.ipaddr }}" class="btn btn-primary">进入</a>
                        {% if request.session.role == 1 %}
                            <button type="button" class="btn btn-info change_host" hostname="{{ item.ipaddr }}"
                                    data-toggle="modal"
                                    data-target="#change_host">修改
                            </button>
                            <button type="button" class="btn btn-danger host_delete" hostname="{{ item.ipaddr }}">删除
                            </button>
                        {% endif %}

                    </td>
                </tr>
            {% endfor %}

            </tbody>
        </table>

    </div>

    {#分页展示#}
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li><a href="?page=1" aria-label="Previous"><span aria-hidden="true">首页</span></a></li>

            {#has_previous 判断是否有上一页#}
            {% if host_list.has_previous %}
                {#previous_page_number 上一页的页码#}
                <li><a href="?page={{ host_list.previous_page_number }}" aria-label="Previous"><span
                        aria-hidden="true">上一页</span></a></li>
            {% else %}
                {#class="disabled" 禁止用户点击#}
                <li class="disabled"><a href="" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>
            {% endif %}

            {#遍历页码的列表#}
            {% for i in pageRange %}
                {#判断当前页码数等于底部页码时#}
                {% if current_num == i %}
                    {#增加class,加深按钮#}
                    <li class="active"><a href="?page={{ i }}">{{ i }}</a></li>
                {% else %}
                    {#href参数为简写,它会自动获取当前路径，并拼接参数#}
                    <li><a href="?page={{ i }}">{{ i }}</a></li>
                {% endif %}

            {% endfor %}

            {#has_next 判断是否有下一页#}
            {% if host_list.has_next %}
                {#next_page_number 下一页的页码#}
                <li><a href="?page={{ host_list.next_page_number }}" aria-label="Next"><span
                        aria-hidden="true">下一页</span></a></li>
            {% else %}
                {#class="disabled" 禁止用户点击#}
                <li class="disabled"><a href="" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>
            {% endif %}

            <li><a href="?page={{ paginator.num_pages }}" aria-label="Next"><span aria-hidden="true">最后一页</span></a>
            </li>

        </ul>
    </nav>

    {#修改主机框#}
    <div class="modal fade" tabindex="-1" role="dialog" id="change_host">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改主机</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="change_host_id">
                        <div class="form-group">
                            <label for="hostname" class="col-sm-3 control-label">主机名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="change_hostname" placeholder="主机名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ipaddr" class="col-sm-3 control-label">ip</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="change_ipaddr"
                                       placeholder="ip">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="change_host_submit">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {#添加主机模态框#}
    <div class="modal fade" tabindex="-1" role="dialog" id="add_host">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加主机</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="hostname" class="col-sm-3 control-label">主机名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="hostname" placeholder="主机名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ipaddr" class="col-sm-3 control-label">ip</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="ipaddr"
                                       placeholder="ip">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="add_host_submit">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <script>
        //判断ip地址的合法性
        function checkIP(value) {
            var exp = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            var reg = value.match(exp);
            if (reg == null) {
                //alert("开始的IP地址不合法！");
                return false;
            }
        }

        //点击修改主机
        $('.btn.btn-info.change_host').click(function () {
            //console.log("点击修改密码了");
            // 获取当前点击这一行，查询指定class属性的text()
            let id = $(this).closest('tr').find('[class=id]').text();
            let hostname = $(this).closest('tr').find('[class=hostname]').text();
            let ipaddr = $(this).closest('tr').find('[class=ipaddr]').text();
            // 修改input的默认值
            $('#change_host_id').val(id);
            $('#change_hostname').val(hostname);
            $('#change_ipaddr').val(ipaddr);

            console.log("修改主机", hostname, ipaddr);
        });

        //修改主机确认按钮
        $('#change_host_submit').click(function () {
            let csrf = $("[name=csrfmiddlewaretoken]").val();
            let id = $('#change_host_id').val();
            let hostname = $('#change_hostname').val();
            let ipaddr = $('#change_ipaddr').val();

            //判断是否为空
            if (hostname.length == 0) {
                swal("错误！", "主机名不能为空!", "error");
                return false
            }
            if (ipaddr.length == 0) {
                swal("错误！", "ip地址不能为空!", "error");
                return false
            }

            //判断ip是否合法
            if (checkIP(ipaddr) == false) {
                swal("错误！", "ip地址不合法!", "error");
                return false
            }
            console.log("修改主机", hostname, ipaddr);

            //发送ajax请求
            $.ajax({  //发送ajax请求
                url: '/host/edit/' + id + '/',
                type: "post",
                data: {
                    'hostname': hostname,
                    'ipaddr': ipaddr,
                    csrfmiddlewaretoken: csrf,
                },
                success: function (arg) {
                    arg = JSON.parse(arg);
                    console.log(arg);
                    //return false;
                    if (arg.code == "200") { //判断json的状态
                        swal({
                            title: '成功',
                            type: 'success',  //展示成功的图片
                            timer: 500,  //延时500毫秒
                            showConfirmButton: false  //关闭确认框
                        }, function () {
                            window.location.href = arg.url;  //跳转后台首页
                        });
                        //window.location.href = arg.url;
                    } else {
                        swal("失败！", arg.error, "error");
                    }
                },
                error: function () {
                    swal("失败！", "网络请求错误!", "error");
                }
            });
        });

        //添加主机确认按钮
        $('#add_host_submit').click(function () {
            let csrf = $("[name=csrfmiddlewaretoken]").val();
            let hostname = $('#hostname').val();
            let ipaddr = $('#ipaddr').val();

            //判断是否为空
            if (hostname.length == 0) {
                swal("错误！", "主机名不能为空!", "error");
                return false
            }
            if (ipaddr.length == 0) {
                swal("错误！", "ip地址不能为空!", "error");
                return false
            }

            //判断ip是否合法
            if (checkIP(ipaddr) == false) {
                swal("错误！", "ip地址不合法!", "error");
                return false
            }
            console.log("添加主机", hostname, ipaddr);

            //发送ajax请求
            $.ajax({  //发送ajax请求
                url: '/host/add_json/',
                type: "post",
                data: {
                    'hostname': hostname,
                    'ipaddr': ipaddr,
                    csrfmiddlewaretoken: csrf,
                },
                success: function (arg) {
                    arg = JSON.parse(arg);
                    console.log(arg);
                    //return false;
                    if (arg.code == "200") { //判断json的状态
                        swal({
                            title: '成功',
                            type: 'success',  //展示成功的图片
                            timer: 500,  //延时500毫秒
                            showConfirmButton: false  //关闭确认框
                        }, function () {
                            window.location.href = arg.url;  //跳转后台首页
                        });
                        //window.location.href = arg.url;
                    } else {
                        swal("失败！", arg.error, "error");
                    }
                },
                error: function () {
                    swal("失败！", "网络请求错误!", "error");
                }
            });
        });

        //删除主机ajax请求
        function delete_host_ajax(id) {
            let csrf = $("[name=csrfmiddlewaretoken]").val();
            $.ajax({  //发送ajax请求
                url: '/host/delete/' + id + '/',
                type: "post",
                data: {
                    csrfmiddlewaretoken: csrf,
                },
                success: function (arg) {
                    arg = JSON.parse(arg);
                    console.log(arg);
                    //return false;
                    if (arg.code == "200") { //判断json的状态
                        swal({
                            title: '成功',
                            type: 'success',  //展示成功的图片
                            timer: 500,  //延时500毫秒
                            showConfirmButton: false  //关闭确认框
                        }, function () {
                            window.location.href = arg.url;  //跳转后台首页
                        });
                        //window.location.href = arg.url;
                    } else {
                        swal("失败！", arg.error, "error");
                    }
                },
                error: function () {
                    swal("失败！", "网络请求错误!", "error");
                }
            });
        }

        // 删除主机
        $('.btn.btn-danger.host_delete').click(function () {
            //let id = $(this).attr('id');
            // 获取当前点击这一行，查询指定class属性的text()
            let id = $(this).closest('tr').find('[class=id]').text();
            let hostname = $(this).attr('hostname');
            console.log("删除主机" + hostname);

            swal({
                    title: "确定删除" + hostname + "主机吗？",
                    text: "你将无法恢复该主机！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确定删除！",
                    cancelButtonText: "取消删除！",
                    closeOnConfirm: false,
                    closeOnCancel: false
                },
                function (isConfirm) {
                    if (isConfirm) {
                        //发送ajax请求
                        delete_host_ajax(id);
                    } else {
                        swal("取消！", hostname + "主机是安全的",
                            "error");
                    }
                });
        });

    </script>
{% endblock content %}
